<!--
 * @Author: malgee
 * @Date: 2025-04-23 11:10:40
 * @LastEditors: maling
 * @LastEditTime: 2025-04-23 15:17:55
 * @FilePath: /vue3-ts-cms/src/views/login/cpns/login-panel-account.vue
 * @Description: 
 * 
-->
<template>
  <div class="login-panel-account">
    <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="loginForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineExpose } from 'vue'
import { rules } from '../config/login.config'
import localCache from '@/utils/cache'
import { useStore } from '@/store'

const store = useStore()
const loginForm = reactive({
  name: localCache.get('name') || '',
  password: localCache.get('password') || ''
})
const loginFormRef = ref()

const loginAction = (isKeepPwd: boolean) => {
  loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      if (isKeepPwd) {
        localCache.set('name', loginForm.name)
        localCache.set('password', loginForm.password)
      } else {
        localCache.remove('name')
        localCache.remove('password')
      }
      store.dispatch('login/accountLogin', {...loginForm})
    }
  })
}

// 🔥导出loginAction函数供父组件调用
defineExpose({
  loginAction
})



</script>

<style scoped lang="less">
</style>